<template>
  <div v-if="show" class="lum-dialog-mask animated fadeIn">
    <el-container class="lum-dialog-box" v-outside="closeBox">
      <el-header class="no-padding header" height="50px">
        <p>发送视频</p>
        <p class="tools">
          <el-icon @click="closeBox"><ele-Close /></el-icon>
        </p>
      </el-header>
      <el-main class="no-padding mian">
        <div class="video-content">
            <video 
                v-show="src" 
                :src="src" 
                ref="video" 
                @pause="onPause" 
                @ended="ended"
            ></video>
            <div class="hover-btn">
                <i @click="handlePlay" class="fa fa-pause" v-if="isPlay"></i>
                <i @click="handlePlay" class="fa fa-play" v-else></i>
            </div>
        </div>
        <div v-show="src">
          <span class="filename">{{ fileName }}</span>
          <br />
          <span class="size">{{ fileSize }} KB</span>
        </div>
      </el-main>

      <el-footer class="footer" height="50px">
        <el-button
          class="btn"
          type="primary"
          size="default"
          :loading="loading"
          @click="uploadVideo"
          >立即发送
        </el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { reactive, toRefs, watch, ref } from 'vue'
export default {
    name: 'MeEditorVideoView',
    props: {
        modelValue: {
            type: Boolean,
            default: false
        },
        file: {
            type: File,
            default() {
                return null
            }
        },
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        const { modelValue, file } = toRefs(props)
        const video = ref()
        const state = reactive({
            src: '',
            fileSize: '',
            fileName: '',
            loading: false,
            show: false,
            isPlay: false
        })
        const closeBox = () => {
            if (state.loading) {
                return false
            }
            context.emit('update:modelValue', false)
        }
        const loadFile = (file) => {
            let reader = new FileReader()
            state.fileSize = Math.ceil(file.size / 1024)
            state.fileName = file.name
            reader.onload = () => {
                state.src = reader.result
            }
            reader.readAsDataURL(file)
        }
        // 确认按钮事件
        const uploadVideo = () => {
            state.loading = true
            context.emit('confirm')
        }
        // 播放
        const handlePlay = () => {
            const videoDom = video.value
            if (state.isPlay) {
                videoDom.pause()
            } else {
                videoDom.play()
            }
            state.isPlay = !state.isPlay
        }
        const onPause = () => {
            state.isPlay = false
        }
        const ended = () => {
            state.isPlay = false
        }
        watch(() => modelValue.value, 
            val => {
                state.show = val
            }
        )
        watch(() => file.value, 
            val => {
                loadFile(val)
            }
        )
        return {
            ...toRefs(state),
            closeBox,
            loadFile,
            uploadVideo,
            video,
            handlePlay,
            onPause,
            ended
        }
    }
}
</script>

<style lang="scss" scoped>
.lum-dialog-box {
  width: 500px;
  max-width: 500px;
  height: 450px;

  .mian {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .video-content{
        max-width: 80%;
        max-height: 80%;
        cursor: pointer;
        box-shadow: 0 0 8px #e0dbdb;
        position: relative;
        .hover-btn{
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: unset;
            display: flex;
            align-items: center;
            justify-content: center;
            i{
                font-size: 28px;
                color: white;
                background: rgba(0,0,0,.5);
                border-radius: 50%;
                width: 50px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                &::before{
                    margin-left: 6px;
                }
            }
            .fa-pause{
                &::before{
                    margin-left: 0;
                }
            }
        }
        &:hover {
            .hover-btn{
                visibility: visible;
            }
        }
    }
    video {
      max-width: 100%;
      max-height: 100%;
      border-radius: 3px;
      display: block;
    }

    div {
      margin-top: 10px;
      text-align: center;
      overflow: hidden;
      max-width: 80%;

      .filename {
        font-weight: 400;
      }

      .size {
        color: rgb(148, 140, 140);
        font-size: 12px;
      }
    }
  }

  .footer {
    height: 50px;
    background: rgba(247, 245, 245, 0.66);
    text-align: center;
    line-height: 50px;

    .btn {
      width: 150px;
      border-radius: 2px;
    }
  }
}
</style>